import React, {useEffect, useState} from "react";
import {useParams} from "react-router-dom";
import PojApi from "@/api/PojApi.ts";
import {PojInfoDto} from "@/api/Types/ObjInterfaces.ts";
import {Empty} from "antd";
import RectangularPojView from "@/pages/PojPage/RectangularPojView";

const PojPage: React.FC = () => {
    const params = useParams<{pojId: string}>()
    const [pojInfoDto, setPojInfoDto] = useState<PojInfoDto>(null)

    useEffect(() => {
        PojApi.getPojById(params.pojId).then(data => {
            setPojInfoDto(data)
        })
    }, [params]);

    if (pojInfoDto == null) {
        return (
            <div>
                <Empty/>
            </div>
        )
    }

    if (pojInfoDto.pojType == 'Rectangular') {
        return (
            <RectangularPojView pojInfoDto={pojInfoDto}/>
        )
    }

    return (
        <div>
            {
                pojInfoDto.name
            }
        </div>
    )
}

export default PojPage